<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="page__content">
  <div class="api-subscribe__content">
    <div class="api-subscribe__stepper" *ngIf="hasStepper()">
      <gv-stepper
        [steps]="steps"
        [current]="currentStep"
        (:gv-stepper:change)="onChangeStep($event)"
        [disabled]="isKeyLess() || hasSubscription()"
      ></gv-stepper>
    </div>

    <div
      [ngClass]="{
        'step-content': true,
        one: this.currentStep === 1,
        two: this.currentStep === 2,
        three: this.canDisplayApiKeyModeStep() && this.currentStep === 3,
        four: (this.canDisplayApiKeyModeStep() && this.currentStep === 4) || (!this.canDisplayApiKeyModeStep() && this.currentStep === 3)
      }"
    >
      <form [formGroup]="subscribeForm">
        <div class="step step-1">
          <h2>{{ 'apiSubscribe.plans.title' | translate }}</h2>
          <p>{{ 'apiSubscribe.plans.description' | translate }}</p>

          <gv-plans [plans]="plans" formControlName="plan" name="plan" ngDefaultControl></gv-plans>

          <div *ngIf="isSubscription()">
            <h3>{{ 'apiSubscribe.planSubscription.title' | translate }}</h3>
            <div class="form-control form-control__chanel">
              <gv-input
                class="form__control form-control__chanel"
                formControlName="channel"
                label="{{ 'apiSubscribe.planSubscription.channel' | translate }}"
                name="channel"
                ngDefaultControl
              ></gv-input>
            </div>
            <div class="form-control form-control__entrypoint">
              <gv-select
                class="form__control form-control__entrypoint"
                formControlName="entrypoint"
                label="{{ 'apiSubscribe.planSubscription.entrypointId' | translate }}"
                [options]="entrypointOptions"
                name="entrypoint"
                ngDefaultControl
              ></gv-select>
            </div>
            <div class="form-control">
              <gv-schema-form-group
                [schema]="selectedEntrypointSchema"
                (:gv-schema-form-group:error)="onSubscriptionConfigurationError($event)"
                formControlName="entrypointConfiguration"
                name="entrypointConfiguration"
                validate="true"
                ngDefaultControl
              ></gv-schema-form-group>
            </div>
          </div>

          <div *ngIf="isKeyLess() && apiSample">
            <h3>{{ 'apiSubscribe.plans.sample' | translate }}</h3>
            <p *ngIf="isTcpApi">{{ 'apiSubscribe.plans.tcpSampleNote' | translate }}</p>
            <gv-code [options]="{ mode: 'shell', lineNumbers: true, lineWrapping: true }" [value]="apiSample" readonly clipboard></gv-code>
          </div>
        </div>

        <div class="step step-2">
          <div class="message">
            <p>{{ 'apiSubscribe.apps.description' | translate }}</p>
            <p
              *ngIf="hasConnectedApps()"
              [innerHTML]="'apiSubscribe.apps.connectedApps' | translate : { count: getConnectedAppsCount(), apiName: apiName }"
            ></p>
            <p *ngIf="!hasAvailableApplications()">
              <strong>{{ 'apiSubscribe.apps.noAvailableApplications' | translate }}</strong>
            </p>
            <a
              *ngIf="!hasAvailableApplications() && canCreateApp()"
              [routerLink]="['/applications/creation']"
              [queryParams]="{ api: apiId }"
              >{{ 'apiSubscribe.apps.createApp' | translate }}</a
            >
          </div>

          <gv-select
            *ngIf="hasAvailableApplications()"
            label="{{ 'apiSubscribe.apps.chooseApp' | translate }}"
            [options]="availableApplications"
            required
            formControlName="application"
            name="application"
            ngDefaultControl
          ></gv-select>

          <gv-text
            *ngIf="hasAvailableApplications()"
            [attr.label]="getCommentLabel()"
            [required]="hasRequiredComment()"
            formControlName="request"
            name="request"
            ngDefaultControl
          ></gv-text>
        </div>

        <div class="step step-3">
          <h2>{{ 'apiKeyMode.title' | translate }}</h2>
          <p>{{ 'apiKeyMode.description' | translate }}</p>

          <gv-option [options]="apiKeyModeOptions" formControlName="apiKeyMode" name="apiKeyMode" ngDefaultControl></gv-option>
        </div>

        <div class="step step-4">
          <div *ngIf="displayGeneralConditions()">
            <h3>{{ 'common.general_conditions.title' | translate }}</h3>

            <app-gv-page *ngIf="!this.subscribeForm.valid" class="general_conditions" [page]="getCurrentGeneralConditions()"> </app-gv-page>

            <gv-checkbox
              formControlName="general_conditions_accepted"
              label="{{ 'common.general_conditions.accept' | translate }}"
              name="general_conditions_accepted"
              ngDefaultControl
            >
            </gv-checkbox>
          </div>

          <div class="message" *ngIf="!subscribeForm.valid && !displayGeneralConditions()">
            <p [innerHTML]="'apiSubscribe.validate.notCompleted' | translate : { apiName: apiName }"></p>
          </div>

          <div class="message" *ngIf="!hasSubscription() && subscribeForm.valid && !hasSubscriptionError">
            <p
              [innerHTML]="
                'apiSubscribe.validate.askConfirmation'
                  | translate : { planName: getPlanName(), appName: getApplicationName(), apiName: apiName }
              "
            ></p>
            <p [innerHTML]="'apiSubscribe.validate.information' | translate : { hasAutoValidation: hasAutoValidation() }"></p>
          </div>

          <div class="message" *ngIf="hasSubscriptionError">
            <gv-icon shape="appliances:highvoltage"></gv-icon>
            <h2>{{ 'apiSubscribe.errors.sorry' | translate }}</h2>
            <p [innerHTML]="'apiSubscribe.errors.information' | translate"></p>
            <p *ngIf="subscriptionError">{{ subscriptionError }}</p>
          </div>

          <div *ngIf="hasSubscriptionAccepted()">
            <div class="message subscription-accepted">
              <gv-icon class="success-icon" shape="general:thunder"></gv-icon>
              <h2>{{ 'apiSubscribe.success.congratulations' | translate }}</h2>
              <p
                [innerHTML]="
                  'apiSubscribe.success.subscriptionAccepted'
                    | translate : { planName: getPlanName(), appName: getApplicationName(), apiName: apiName }
                "
              ></p>
              <p *ngIf="getSubscriptionKey()">
                <span>{{ 'apiSubscribe.success.subscriptionKey' | translate }}</span>
                <gv-input clipboard [value]="getSubscriptionKey()" small></gv-input>
              </p>
              <p *ngIf="isOAuth2() || isJWT()">
                <span>{{ 'apiSubscribe.success.oauth2' | translate }}</span>
              </p>
              <div class="success-links">
                <a [routerLink]="['/']"
                  >{{ 'apiSubscribe.success.goToHome' | translate }}<gv-icon shape="navigation:angle-right"></gv-icon
                ></a>
                <a [routerLink]="['/catalog/api', apiId]"
                  >{{ 'apiSubscribe.success.discoverApi' | translate }}<gv-icon shape="navigation:angle-right"></gv-icon
                ></a>
              </div>
            </div>
            <div>
              <h3>{{ 'apiSubscribe.plans.sample' | translate }}</h3>
              <gv-code
                [options]="{ mode: 'shell', lineNumbers: true, lineWrapping: true }"
                [value]="apiSample"
                readonly
                clipboard
              ></gv-code>
            </div>
          </div>

          <div class="message" *ngIf="hasSubscriptionPending()">
            <gv-icon class="success-icon" shape="home:timer"></gv-icon>
            <h2>{{ 'apiSubscribe.success.congratulations' | translate }}</h2>
            <p
              [innerHTML]="
                'apiSubscribe.success.subscriptionPending'
                  | translate : { planName: getPlanName(), appName: getApplicationName(), apiName: apiName }
              "
            ></p>
            <div class="success-links">
              <a [routerLink]="['/']"
                >{{ 'apiSubscribe.success.goToHome' | translate }}<gv-icon shape="navigation:angle-right"></gv-icon
              ></a>
              <a [routerLink]="['/catalog/api', apiId]"
                >{{ 'apiSubscribe.success.discoverApi' | translate }}<gv-icon shape="navigation:angle-right"></gv-icon
              ></a>
            </div>
          </div>

          <div class="message" *ngIf="hasSubscriptionRejected()">
            <p
              [innerHTML]="
                'apiSubscribe.success.subscriptionRejected'
                  | translate : { planName: getPlanName(), appName: getApplicationName(), apiName: apiName }
              "
            ></p>
          </div>
        </div>
      </form>
    </div>

    <div class="actions" *ngIf="hasStepper()">
      <div>
        <gv-button (:gv-button:click)="onExit()" outlined *ngIf="!hasSubscription()" icon="code:stop">{{
          'apiSubscribe.exit' | translate
        }}</gv-button>
        <gv-button
          *ngIf="hasPreviousAction()"
          (:gv-button:click)="onPrevious()"
          primary
          outlined
          [disabled]="!canPrevious()"
          icon="navigation:angle-left"
          >{{ 'apiSubscribe.previousStep' | translate }}</gv-button
        >
      </div>

      <gv-button *ngIf="hasNextAction()" (:gv-button:click)="onNext()" primary icon-right="navigation:angle-right">{{
        'apiSubscribe.nextStep' | translate
      }}</gv-button>
      <gv-button
        *ngIf="hasValidateAction()"
        (:gv-button:click)="onValidate()"
        primary
        [disabled]="!subscribeForm.valid"
        [loading]="showValidateLoader"
        icon="code:check"
        >{{ 'apiSubscribe.validate.subscription' | translate }}</gv-button
      >
    </div>
  </div>

  <aside class="aside">
    <div class="page__box" *ngIf="api">
      <div class="page__box-title">
        <gv-identity-picture [display_name]="displayName" [picture]="picture"></gv-identity-picture>
        <h4 class="title">
          {{ api.name }}<span>{{ api.version }}</span>
        </h4>
      </div>
      <div class="page__box-content">
        <div class="info info__description">
          <h4 class="title">{{ 'api.information.about' | translate }}</h4>
          {{ api.description }}
        </div>

        <div class="info" *ngIf="api.entrypoints && api.entrypoints.length > 0">
          <h4 class="title">{{ 'api.information.entrypoints' | translate }}</h4>
          <div *ngFor="let e of api.entrypoints" class="info__resources">
            <gv-button link [href]="e" (:gv-button:click)="goToExtern(e)"
              ><span>{{ e }}</span></gv-button
            >
          </div>
        </div>

        <div class="info" *ngIf="api.categories && api.categories.length > 0">
          <h4 class="title">{{ 'api.information.categories' | translate }}</h4>
          <span>
            <gv-tag *ngFor="let category of api.categories" (:gv-tag:click)="goToCategory(category)" [clickable]="true">{{
              category
            }}</gv-tag>
          </span>
        </div>

        <div class="info" *ngIf="api.labels && api.labels.length > 0">
          <h4 class="title">{{ 'api.information.labels' | translate }}</h4>
          <span>
            <gv-tag *ngFor="let tag of api.labels" (:gv-tag:click)="goToSearch(tag)" [clickable]="true" major>{{ tag }}</gv-tag>
          </span>
        </div>
      </div>
    </div>

    <gv-list
      [items]="connectedApps"
      title="{{ 'apiSubscribe.connectedApps' | translate : { planName: getPlanName(), count: connectedApps ? connectedApps.length : 0 } }}"
      clickable
    ></gv-list>
  </aside>
</div>
